<template>
	<div style="background-color: black;">
		<van-row>
			<van-col span="2.5">
				<div class="img">
					<van-image
					  width="5rem"
					  height="3rem" 
					  src="/public/web_title.png"
					/>
				</div>
				
			</van-col>
			<van-col span="21">
				<p class="name">二手车交易交流中心</p>		  
			</van-col>
		</van-row>
		
		
		
	</div>
	
	<div>
		<van-swipe :autoplay="2000" lazy-render>
		  <van-swipe-item v-for="image in images" :key="image">
		    <img fit=""
			:src="image" />
		  </van-swipe-item>
		</van-swipe>
	</div>
	
	<van-divider class="divider"/>
	
	<div class="bottom">
		
		<p class="label">精品推荐</p>
		
		<van-grid :border="false" :column-num="3">
		  <van-grid-item @click="preview1">
		    <van-image
		      src="/src/images/home/h6.jpg"
		    />
			<p class="p">哈弗H6 运动版 2019款</p>
			<p class="p p_font">7.25万</p>
		  </van-grid-item>
		  <van-grid-item @click="preview2">
		    <van-image
		      src="/src/images/home/bcE.jpg"
		    />
			<p class="p">奔驰E300L 2021款</p>
			<p class="p p_font">40.36万</p>
		  </van-grid-item>
		  <van-grid-item @click="preview3">
		    <van-image
		      src="/src/images/home/q7.jpg"
		    />
			<p class="p">奥迪Q7 2020款</p>
			<p class="p p_font">57.10万</p>
		  </van-grid-item>
		  <van-grid-item @click="preview4">
		    <van-image
		      src="/src/images/home/xp5.jpg"
		    />
			<p class="p">小鹏P5 2021款</p>
			<p class="p p_font">16.28万</p>
		  </van-grid-item>
		  <van-grid-item @click="preview5">
		    <van-image
		      src="/src/images/home/bwm5.jpg"
		    />
			<p class="p">宝马5系新能源 2020款</p>
			<p class="p p_font">36.80万</p>
		  </van-grid-item>
		  <van-grid-item @click="preview6">
		    <van-image
		      src="/src/images/home/bwm1.jpg"
		    />
			<p class="p">宝马1系 2021款</p>
			<p class="p p_font">15.15万</p>
		  </van-grid-item>
		</van-grid>
		
		
	</div>
	
	
	
	
</template>

<script lang="ts" setup>
	import { Swipe, SwipeItem } from 'vant';
	import { Grid, GridItem } from 'vant';
	import { Divider } from 'vant';
	import 'vant/es/image-preview/style';
	import { ImagePreview } from 'vant';
	import {onMounted} from 'vue';
	
	
	onMounted(()=>{
		console.log("this is on Mounted")
		changeGuidActive()
	})
	const $emit = defineEmits(['change'])
	const changeGuidActive = () => {
		console.log("change",0)
		$emit("change",0)
	}
	
	const images = [
	      '/src/images/lunbo/1.webp',
	      '/src/images/lunbo/2.webp',
		  '/src/images/lunbo/5.webp',
		  '/src/images/lunbo/4.webp',
		  '/src/images/lunbo/5.webp',
	    ];
		
	const VanImagePreview = ImagePreview.Component;
	
	function preview1(){
		ImagePreview({
		  images: [
		    '/src/images/home/h6.jpg',
		  ],
		  closeable: true,
		});
	}
	function preview2(){
		ImagePreview({
		  images: [
			'/src/images/home/bcE.jpg',
		  ],
		  closeable: true,
		});
	}
	function preview3(){
		ImagePreview({
		  images: [
			'/src/images/home/q7.jpg',
		  ],
		  closeable: true,
		});
	}
	function preview4(){
		ImagePreview({
		  images: [
			'/src/images/home/xp5.jpg',
		  ],
		  closeable: true,
		});
	}
	function preview5(){
		ImagePreview({
		  images: [
			'/src/images/home/bwm5.jpg',
		  ],
		  closeable: true,
		});
	}
	function preview6(){
		ImagePreview({
		  images: [
			'/src/images/home/bwm1.jpg',
		  ],
		  closeable: true,
		});
	}
	
	
</script>

<style >
	.divider {
		border-bottom: 2.5px solid #cecece;
	}
	
	.name {
		font-size: 35px;
		color: white;
		font-weight: bold;
		font-family: '华文行楷';
		font-style: italic;
		margin: 0px;
		padding-top: 26.5px;
	}
	
	.img {
		padding-top: 10.5px;
		padding-left: 20px;
	}
	
	.p {
		margin: 0px;
		padding-top: 5px;
	}
	
	.p_font {
		font-size: 25px;
		color: red;
		
	}
	
</style>